<template>
  <div id="main" class="main">
    <div class="header">
      <img :src="baseUrl+logo" alt="Logo">
      <span>{{ name }}</span>
      <p class="desc"></p>
    </div>
    <div class="container">
      <a-tabs defaultActiveKey="1" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }">
        <a-tab-pane tab="账号密码登录" key="1">
          <a-form :form="form" @submit="handleSubmit" class="login-form">
            <a-form-item>
              <a-input
                size="large"
                placeholder="用户名"
                v-decorator="[
                  'userName',
                  { rules: [{ required: true, message: '请输入用户名!' }] }
                ]">
                <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input
                size="large"
                type="password"
                placeholder="密码"
                v-decorator="[
                  'password',
                  { rules: [{ required: true, message: '请输入密码!' }] }
                ]">
                <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-checkbox>记住密码</a-checkbox>
              <a class="login-form-forgot">忘记密码</a>
              <div>
                <a-button :loading="loading" size="large" type="primary" htmlType="submit" class="login-form-button">确 定</a-button>
              </div>
            </a-form-item>
          </a-form>
        </a-tab-pane>
        <a-tab-pane tab="微信登录" key="2" forceRender>
          微信登录
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="footer">
      <div class="links">
        <a href="_self">帮助</a>
        <a href="_self">隐私</a>
        <a href="_self">条款</a>
      </div>
      <div class="copyright">
        {{ footer }}
      </div>
    </div>
  </div>
</template>
<script>
import Mock from '@/utils/mock'
import { timeFix, setToken } from '@/utils/utils'
import { mapState } from 'vuex'
import { Login } from '@/api/login'
Mock()
export default {
  data() {
    return {
      baseUrl: process.env.BASE_URL,
      form: this.$form.createForm(this),
      loading: false
    }
  },
  computed: {
    ...mapState({
      name: state => state.app.name,
      logo: state => state.app.logo,
      footer: state => state.app.footer
    })
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true
          Login(values).then(res => {
            setToken(res.token)
            this.$router.push({ path: this.$route.query.redirect || '/' })
            this.$message.success(`${timeFix()}，欢迎回来`);
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .main {
    background: #f0f2f5 url(../../assets/img/background.svg) no-repeat 50%;
    background-size: 100%;
    min-height: 100vh;
    width: 100%;
    padding: 110px 0 144px;
    .header{
      text-align: center;
      img{
        width: 55px;
        height: 55px;
        vertical-align: bottom;
        margin-right: 16px;
        border-style: none;
      }
      span{
        font-size: 33px;
        color: rgba(0, 0, 0, 0.85);
        font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-weight: 600;
        position: relative;
        top: -4px;
      }
      .desc{
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
        margin-top: 12px;
        margin-bottom: 40px;
      }
    }
    .footer {
      position: absolute;
      width: 100%;
      bottom: 0;
      padding: 0 16px;
      margin: 48px 0 24px;
      text-align: center;

      .links {
        margin-bottom: 8px;
        font-size: 14px;
        a {
          color: rgba(0, 0, 0, 0.45);
          transition: all 0.3s;
          &:not(:last-child) {
            margin-right: 40px;
          }
        }
      }
      .copyright {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
      }
    }
  }
  .container{
    position: relative;
    z-index: 100;
    background: #f0f2f5;
    width: 368px;
    margin: 0 auto;
    .login-form-button{
      margin-top: 24px;
      width: 100%;
    }
    .login-form-forgot{
      float: right;
    }
  }
</style>
